<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Smart 后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/Smart_Backstage/layui/css/layui.css">
    <script src="/Smart_Backstage/layui/layui.js" charset="utf-8"></script>
    <script src="\Smart_Backstage\js\jquery-3.4.1.js"></script>

    <style type="text/css">

        .layui-body{
            background-color: #F0F0F0;
        }

        #doContainer{
            background-color: white;
            border-top: 2px solid #1E9FFF;
            margin: 20px;
            border-radius:10px;
        }

        #tableDiv{
            padding: 25px;
        }

        #daohTitle{
            padding-top: 25px;
            padding-left: 35px;
            padding-bottom: 15px;
            display: inline-block;
        }

        .selectContainer{
            margin-top: 20px;
        }
        #price{
            margin-top: 20px;
        }

        #demo2 img{
            width: 300px;
            height: 300px;
        }


        .layui-btn  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

    </style>

</head>

<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">

    <div class="header"></div>

    <div class="left"></div>

    <div class="layui-body">
        <!-- 内容主体区域-->
        <div id="doContainer">
                <span class="layui-breadcrumb" id="daohTitle">
                    <a href="index.html">首页</a>
                    <a href="#">发布商品</a>
                    <a><cite>二手汽车</cite></a>
                </span>

            <div id="tableDiv">

                <form class="layui-form" action="">

                    <input type="text" name="userId" id="getUserId" autocomplete="off" style="display: none;" class="layui-input">

                    <div class="layui-form-item">
                        <label class="layui-form-label">标题名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-col-md5" id="price">
                        <label class="layui-form-label">价格</label>
                        <div class="layui-input-block">
                            <input type="text" name="money" required  lay-verify="price" placeholder="请输入价格" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-row layui-form-item ">

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">汽车品牌</label>
                            <div class="layui-input-inline">
                                <select name="carBrandId" id="carBrandId" lay-verify="required">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">颜色</label>
                            <div class="layui-input-inline">
                                <select name="colour" lay-verify="required">
                                    <option value=""></option>
                                    <option value="红色">红色</option>
                                    <option value="黑色">黑色</option>
                                    <option value="白色">白色</option>
                                    <option value="香槟色">香槟色</option>
                                    <option value="银色">银色</option>
                                    <option value="咖啡色">咖啡色</option>
                                    <option value="银灰色">银灰色</option>
                                    <option value="紫色">紫色</option>
                                    <option value="黄色">黄色</option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">汽车年龄</label>
                            <div class="layui-input-inline">
                                <select name="age" lay-verify="required">
                                    <option value=""></option>
                                    <option value="1年内">1年内</option>
                                    <option value="2年内">2年内</option>
                                    <option value="3年内">3年内</option>
                                    <option value="3-5年">3-5年</option>
                                    <option value="5-8年">5-8年</option>
                                    <option value="8年以上">8年以上</option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">里程</label>
                            <div class="layui-input-inline">
                                <select name="km" lay-verify="required">
                                    <option value=""></option>
                                    <option value="1万公里">1万公里</option>
                                    <option value="3万公里">3万公里</option>
                                    <option value="5万公里">5万公里</option>
                                    <option value="10万公里">10万公里</option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">排放标准</label>
                            <div class="layui-input-inline">
                                <select name="standard" lay-verify="required">
                                    <option value=""></option>
                                    <option value="国一">国一</option>
                                    <option value="国二">国二</option>
                                    <option value="国三">国三</option>
                                    <option value="国四">国四</option>
                                    <option value="国五">国五</option>
                                    <option value="国六">国六</option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">排量</label>
                            <div class="layui-input-inline">
                                <select name="displacement" lay-verify="required">
                                    <option value=""></option>
                                    <option value="1.0升以下">1.0升以下</option>
                                    <option value="1.1-1.5升">1.1-1.5升</option>
                                    <option value="1.6-2.0升">1.6-2.0升</option>
                                    <option value="2.1-3.0升">2.1-3.0升</option>
                                    <option value="3.1升以上">3.1升以上</option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">变速箱</label>
                            <div class="layui-input-inline">
                                <select name="gearbox" lay-verify="required">
                                    <option value=""></option>
                                    <option value="手动">手动</option>
                                    <option value="自动">自动</option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">国别</label>
                            <div class="layui-input-inline">
                                <select name="country" lay-verify="required">
                                    <option value=""></option>
                                    <option value="中国">中国</option>
                                    <option value="美国">美国</option>
                                    <option value="日本">日本</option>
                                    <option value="英国">英国</option>
                                    <option value="加拿大">加拿大</option>
                                    <option value="韩国">韩国</option>
                                    <option value="瑞士">瑞士</option>
                                    <option value="墨西哥">墨西哥</option>
                                    <option value="法国">法国</option>
                                    <option value="德国">德国</option>
                                    <option value="澳大利亚">澳大利亚</option>
                                    <option value="瑞典">瑞典</option>
                                    <option value="巴西">巴西</option>
                                    <option value="意大利">意大利</option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">汽车级别</label>
                            <div class="layui-input-inline">
                                <select name="carTypeId" id="carTypeId" lay-verify="required">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class=" layui-col-md5 selectContainer">
                            <label class="layui-form-label">能源</label>
                            <div class="layui-input-inline">
                                <select name="capabilities" lay-verify="required">
                                    <option value=""></option>
                                    <option value="汽油">汽油</option>
                                    <option value="柴油">柴油</option>
                                    <option value="油气混动">油气混动</option>
                                    <option value="油电混动">油电混动</option>
                                    <option value="纯电动">纯电动</option>
                                    <option value="天然气">天然气</option>
                                    <option value="插电混动">插电混动</option>
                                </select>
                            </div>
                        </div>

                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">汽车信息</label>
                        <div class="layui-input-block">
                            <textarea name="message" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                         <label class="layui-form-label">是否激活</label>
                         <div class="layui-input-block">
                             <input name="lock" type="checkbox" checked="" lay-skin="switch" lay-text="ON|OFF">
                         </div>
                     </div>

                    <div class="layui-form-item ">
                        <div class="layui-upload layui-input-block">
                            <a href="javascript:;" class="layui-btn">点击上传文件
                                <input type="file" multiple="true" id="fileId" onchange="showImg(this,'#demo2')"  />
                            </a>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list" id="demo2"></div>
                            </blockquote>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo" id="submit_">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="footer"></div>

</div>



<script>

    var formData = new FormData();//jaxa上传的数据
    var count = 0;//图片的数量

    layui.use(['form','upload'], function(){
        var form = layui.form
            ,$ = layui.jquery
            ,upload = layui.upload;

        /*
            检验价格
        */
        form.verify({
            price: [
                /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
                ,'请输入正确的价格'
            ]
        });



        /*
            得到用户的id
         */
        $.ajax({
            // 编写json格式，设置属性和值
            url: "/Smart_Backstage/user/message",
            contentType: "application/json;charset=UTF-8",
            data: '',
            dataType: "json",
            type: "post",
            success: function (data) {
                if(data!=undefined||data!=null){
                    $("#getUserId").val(data.id);
                }
            }
        })


        /*
            加载category数据
        */
        $.ajax({
            url:'/Smart_Backstage/category/get',
            contentType:'application/json;charset=UTF-8',
            data:'',
            dataType:'json',
            type:'post',
            success:function(data){
                if(data!=undefined&&data!=null){
                    for(var i = 0;i<data.cateBrands.length;i++){
                        $("#carBrandId").append('<option value="'+data.cateBrands[i].id+'">'+data.cateBrands[i].name+'</option>')
                    }
                    for(var i = 0;i<data.carTypes.length;i++){
                        $("#carTypeId").append('<option value="'+data.carTypes[i].id+'">'+data.carTypes[i].name+'</option>')
                    }
                    form.render();
                }
            }
        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            if(count<3){
                alert("图片至少3张")
                return false;
            }
            if(data.field.money>100000000){
                alert("您输入的金额过大，请调整！")
                return;
            }
            //alert(JSON.stringify(data.field));
            formData.append('jsonStr',JSON.stringify(data.field));

            /*
                提交数据
             */
            $("#submit_").attr("disabled",true);
            $.ajax({
                url: "/Smart_Backstage/announce/upload",
                type: "POST",
                secureuri:false,
                cache: false,    //上传文件不需缓存
                processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
                contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
                data: formData,
                success: function (data) {
                    if(data==1){
                        alert("文件上传成功。")
                        window.location.href="index.html";
                    }else{
                        alert("文件上传失败。")
                    }
                    $("#submit_").attr("disabled",false);
                },
                error: function () {
                    alert("上传失败！请检查网络是否正常。")
                    $("#submit_").attr("disabled",false);
                }
            });
            return false;
        });


    });

    /*
        加载图片以及把图片写入formData里面
     */
    function showImg(fileObj,id){
        var file = fileObj.files[fileObj.files.length-1];
        var type = file.type+"";

        if(type.indexOf("image")!=-1){
            formData.append('files', file);
            count ++;

            var fileReader = new FileReader(); //创建一个filereader对象
            var img = new Image();  //创建一个图片对象
            fileReader.readAsDataURL(file)  //读取所上传对的文件
            fileReader.onload = function(){
                $(id).append('<img src="'+ this.result +'" class="layui-upload-img">')  //添加到预览区域
            }
        }else{
            alert("请选择图片！！！")
        }


    }



</script>

<script>

    $(function(){
        $('.header').load('header.html');
        $('.left').load('aside.html');
        $('.footer').load('footer.html');
    })

    //JavaScript代码区域
    $("#content") .load("intoIndex",function () {

        layui.use('element', function(){
            var element = layui.element;
        });

    });
</script>


</body>
</html>